import React, { useState, useEffect } from 'react';
import './index.css';
import FirstImage from "../FirstDemo/img/01.jpg";
import SecondImage from "../FirstDemo/img/02.png";
import thirdImage from "../FirstDemo/img/03.jpg";
import FourthImage from "../FirstDemo/img/04.png";
import fifthImage from "../FirstDemo/img/05.jpg";
import sixthImage from "../FirstDemo/img/06.jpg";
import seventhImage from "../FirstDemo/img/07.jpg";
import eighthImage from "../FirstDemo/img/08.jpg";

const FirstSlider = () => {
  const [curIndex, setCurIndex] = useState(0);
  const titlesData = [
    { title: '传家之样貌', title2: '开撕！豪门弃女翻身逆袭' },
    { title: '奔跑吧 第六季', title2: '沙溢周深穿越宋朝玩谐音梗' },
    { title: '月球陨落', title2: '月球撞地球灾难科幻爽片！' },
    { title: '了不起！舞社', title2: '李斯丹妮王霏霏回忆浪姐经历' },
    { title: '一起探恋爱', title2: '收官！两场告白女霸总怎么选？' },
    { title: '白色强人2', title2: '郭晋安马国明演绎医者仁心' },
    { title: '怦然心动20岁', title2: '双胞胎争新人 萌妹摆烂' },
    { title: '开播！情景喜剧', title2: '秦霄贤花式“哄”杨超越' },
  ];

  const imgPaths = [
    FirstImage,
    SecondImage,
    thirdImage,
    FourthImage,
    fifthImage,
    sixthImage,
    seventhImage,
    eighthImage,
  ];

  useEffect(() => {
    const timer = setInterval(() => {
      setCurIndex((prevIndex) => (prevIndex + 1) % imgPaths.length);
    }, 3000);
  
    return () => clearInterval(timer);
  }, [imgPaths.length]);

  const handleMouseEnter = (index) => {
    setCurIndex(index);
  };

  const handleMouseLeave = () => {
    // No need to handle, autoplay is set in useEffect
  };

  return (
    <div className="container">
      <div className="imgs">
        {imgPaths.map((imgPath, index) => (
          <div
            key={index}
            className={index === curIndex ? 'active' : ''}
          >
            <img src={imgPath} alt=""  className='img'/>
          </div>
        ))}
      </div>
      <div className="titles">
        {titlesData.map((titleData, index) => (
          <button
            key={index}
            className={index === curIndex ? 'active' : ''}
            onMouseEnter={() => handleMouseEnter(index)}
            onMouseLeave={handleMouseLeave}
          >
            <div className="title">{titleData.title}</div>
            <div className="title2">{titleData.title2}</div>
          </button>
        ))}
      </div>
    </div>
  );
};

export default FirstSlider;